<template>
  <div class="teacher-post">
    <h3>任课教师管理</h3>
    <div class="input_box">
      <span class="querySpans">查询条件：</span>
      <el-select filterable clearable v-model="selectData.subject" placeholder="请选择科目" size="small">
        <el-option
          v-for="item in subjectList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-input v-model="selectData.name" placeholder="请输入老师姓名" size="small"></el-input>
      <el-button class="selectBtn" size="small" @click="select">查询</el-button>
      <el-button class="resetBtn" size="small" @click="reset">重置</el-button>
      <el-button size="small" icon="el-icon-circle-plus" class="addAll" style="float: right;margin-right:30px"
                 @click="add">添加任课教师
      </el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%;text-align:center" size="small" fixed>
        <el-table-column prop="id" label="ID" min-width="60" fixed></el-table-column>
        <el-table-column prop="teachUserName" label="教师名称" min-width="150"></el-table-column>
        <el-table-column prop="subject" label="科目ID" min-width="180"></el-table-column>
        <el-table-column prop="subjectName" label="科目" min-width="180"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="150">
          <template v-slot="{row}">
            <span>{{ row.createTime | formatTime }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="120">
          <template v-slot="scope">
            <el-button @click="handleEdit(scope.row)" size="small" style="background:#008a96;color:#fff">修改
            </el-button>
            <el-button @click="handleDelete(scope.row.id)" size="small" style="background:#ea7c5a;color:#fff">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page_option.current_page"
          :page-sizes="[15, 20, 30, 50]"
          :page-size="page_option.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page_option.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  mounted() {
    this.getSubjectList();
    this.getList();
  },
  data() {
    return {
      selectData: {
        subject: "", //科目id
        name: ""  //教师名
      },
      subjectList: [], //科目列表
      tableData: [],
      page_option: {
        current_page: 1,
        page_size: 15,
        total: 0
      },
    };
  },
  methods: {
    //查询按钮
    select() {
      this.page_option.current_page = 1;
      this.getList();
    },
    getSubjectList() {
      this.$api.education.subjectList({
        pageSize: 100,
        pageNum: 1,
      })
        .then((res) => {
          if (res.code === 200) {
            console.log(res);
            this.subjectList = res.data.list;
          }
        });
    },
    //重置按钮
    reset() {
      this.selectData = {
        subject: "",
        name: "",
      };
      this.page_option.current_page = 1;
      this.page_option.page_size = 15;
      this.getList();
    },
    getList() {
      let params = {
        subject: "", //科目id
        name: "",  //教师名
        pageNum: this.page_option.current_page,
        pageSize: this.page_option.page_size,
      };
      this.$api.teacherManagement.theTeacherList(params)
        .then((res) => {
          this.tableData = res.data.list;
          this.page_option.total = res.data.total;
        });
    },
    handleSizeChange(size) {
      this.page_option.page_size = size;
      this.page_option.current_page = 1;
      this.getList();
    },
    handleCurrentChange(current) {
      this.page_option.current_page = current;
      this.getList();
    },
    handleEdit(row) {
      this.$router.push({
        path: "/teacherManagement/teacherPost/edit",
        query: { id: row.id, subject: row.subject, teachUser: row.teachUser }
      });
    },
    handleDelete(id) {
      let that = this;
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        that.$api.teacherManagement.theTeacherDelete(id)
          .then((res) => {
            that.$message.success("删除成功");
            this.getList();
          });
      }).catch(() => {
        this.$message({ type: "info", message: "已取消删除" });
      });
    },
    add() {
      this.$router.push({ path: "/teacherManagement/teacherPost/add" });
    }
  }
};
</script>
<style>
@import url('./list.css');
</style>



